import styled from 'styled-components'
export const HeaderWrapper = styled.div`
    height:75px;
    background-color:black;
    .content{
        height:70px;
        display:flex;
        justify-content:space-between;
    }
    .divider{
        height: 5px;
        background-color:#c20c0c;
    }
`
export const HeaderLeft = styled.div`
    position: relative;
    display:flex;
    .logo{
        //因为a元素行内元素不能设置宽高
        //所以设成block
        display:block;
        height:69px;
        width:177px;
        background-position:0 0;
        text-indent:-99999px;
        //方法二在上方import 引入
        background-image: url(${require("@/assets/img/sprite_01.png").default});
    }
    .linkItem{
        position:relative;
        height:70px;
        line-height:70px;
        font-size:14px;
        color:white;
        text-align:center;
        margin:0 10px;
        a{
            height:70px; 
        }
        :last-of-type a {
            /* position: relative; */
            ::after{
                position: absolute;
                content: "";
                width: 28px;
                height: 19px;
                background-position: -190px 0;
                background-image: url(${require("@/assets/img/sprite_01.png").default});
                top:12px
            }
        }
        /* 路过的a和活跃的a样式 */
        &:hover a,.active{
            color:white;
        }
        .active .icon{
            position:absolute;
            display:block;
            width:12px;
            height:7px;
            background-position: -226px 0;
            top:64px;
            left:50%;
            margin-left:-6px;
            overflow:hidden
        }
    }

`
export const HeaderRight = styled.div`
    display:flex;
    color:white;
    justify-content:center;
    align-items:center;
    .search{
        width: 158px;
        height: 32px;
        border-radius: 16px;
    }
    .center{
        width: 90px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border: 1px solid #666;
        border-radius: 16px;
        margin: 0 16px;
    }
`